<template>
	<div @click="show = false">
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div class="code m1280 f f-a-c f-j-b">
			<span>{{ listObj.name }}</span>
			<div class="imgBox hand f f-a-c f-j-c">
				<img @click.stop="show = !show" src="/src/assets/geng.png" alt="" />
				<div v-show="show" class="rename">
					<div @click.stop="listVisible = true" class="topName">Rename</div>
					<div @click.stop="detl({}, 1)" class="delete">Delete</div>
				</div>
			</div>
		</div>
		<!-- 头像 -->
		<div class="avart f f-a-c m1280">
			<img :src="obj.avatar" class="imgTou" alt="" />
			<div class="box">
				<div class="gavin">{{ obj.firstName }} {{ obj.lastName }}</div>
				<div class="time">{{ formatTimestamp(obj.lastLogin) }} {{ listObj.count }} xpert</div>
			</div>
		</div>
		<!-- Tom Evans -->
		<div v-for="(item, index) in listObj.favoriteListData" :key="index" class="evans m1280 f f-a-c f-j-b">
			<div class="leftBox f">
				<div class="evansAva f f-a-c f-j-c f-d-c">
					<div class="imgAva">
						<img :src="item.avatar" alt="" />
						<img src="/src/assets/user/5.png" class="icon" alt="" />
					</div>
					<div class="chat hand">Chat</div>
				</div>
				<div class="evansCon">
					<div class="topName f f-a-c">
						{{ item.firstName }} {{ item.lastName }} <i>{{ item.level }}.0 / 5 (Review: {{ item.viewNum }})</i> <i>Response Time: {{ item.responseTime }} h</i>
					</div>
					<div class="investor">{{ item.sectorName }}, {{ item.industryName }}</div>
					<!-- 下方的 -->
					<div class="topice f f-a-c">
						<div class="topTit">Topics:</div>
						<div v-for="(ite, ind) in item.topicNames" :key="ind" class="topiceBox">{{ ite }}</div>
						<!-- <div class="topiceBox">Rental</div>
						<div class="topiceBox">Cooperate law</div> -->
					</div>
					<!-- Language:  -->
					<div class="language f f-a-c">
						Language：<span>{{ item.language.join(",") }}</span>
					</div>
				</div>
			</div>
			<div class="rigBtn f f-d-c f-j-b">
				<div class="topImg f f-a-c">
					<div @click="copys" class="lefImg hand f f-a-c"><img src="/src/assets/user/9.png" alt="" />Share</div>
					<div @click="repot(item)" class="lefImg hand f f-a-c">
						<img src="/src/assets/user/8.png" alt="" />
						<!-- <el-tooltip content="Bottom center" placement="bottom" effect="light"> Report </el-tooltip> -->
						Report
					</div>
				</div>
				<div @click="detl(item, 2)" class="delete hand">Delete</div>
			</div>
		</div>
		<div style="width: 100%; height: 80px"></div>
		<!-- 添加 -->
		<el-dialog v-model="listVisible" title="" width="540">
			<div class="dialogTitle">Rename list</div>
			<div class="nameDia">List name</div>
			<input type="text" v-model="listValue" class="dialogInp" name="" id="" />
			<div class="diolBtn f f-a-c">
				<div @click="saverBtn" class="add">Save</div>
			</div>
		</el-dialog>
		<!-- 删除 -->
		<el-dialog v-model="listVisibleDet" title="" width="540">
			<div class="dialogTitleDelete">Delete this list？</div>
			<div class="dialogTitCount">The deleted content cannot be recovered</div>
			<div class="dialogBtn f f-a-c f-j-b">
				<div @click="listVisibleDet = false" class="lefBtn hand">Cancel</div>
				<div @click="deletList" class="rigBtn hand">Delete</div>
			</div>
		</el-dialog>
		<upLoad @reportObj="reportObj" ref="upLoads" />
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import { GetGroupedListData, SellerUserDetails, CreateUser, DetleFavoriteGroup, QuFavoriteUser, EditFavoriteGroup } from "@/api/xpert.js";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import upLoad from "./upLoad.vue";
	import { formatTimestamp, timeHous, copy } from "@/utils/setting.js";
	import { useRoute } from "vue-router";
	import { ElMessage } from "element-plus";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let ind = localStorage.getItem("ind");
	let show = ref(false);
	let route = useRoute();
	let id = route.query.id;
	let listValue = ref("Business");
	let listVisible = ref(false);
	let listVisibleDet = ref(false);
	let listObj = ref({});
	let upLoads = ref("");
	let num = ref(1);
	let repItem = ref({});
	let obj = ref({});
	let delObj = ref({});
	onMounted(() => {
		userinfo();
		initList();
		window.addEventListener("scroll", handleScroll);
	});
	// 点击确认删除
	const deletList = async () => {
		if (num.value == 1) {
			let n = await DetleFavoriteGroup({
				id: id
			});
			if (n.code == 200) {
				ElMessage.success(n.msg);
				listVisibleDet.value = false;
				setTimeout(() => {
					router.go(-1);
				}, 1000);
			}
		} else {
			//删除列表
			let n = await QuFavoriteUser({
				userId: delObj.value.userId
			});
			if (n.code == 200) {
				ElMessage.success(n.msg);
				initList();
				listVisibleDet.value = false;
			}
		}
	};
	//点击删除
	const detl = (item, nums) => {
		num.value = nums;
		console.log(item, nums, "-------------------------------------------------");
		delObj.value = item;
		listVisibleDet.value = true;
	};

	// 点击保存
	const saverBtn = async () => {
		let n = await EditFavoriteGroup({
			id: id,
			name: listValue.value
		});
		if (n.code == 200) {
			ElMessage.success(n.msg);
			initList();
			listVisible.value = false;
		}
	};
	const initList = async () => {
		let n = await GetGroupedListData({ id: id });
		listObj.value = n.data;
		listValue.value = n.data.name;
	};
	const copys = () => {
		const text = window.location.href;
		copy(text);
	};
	const repot = async item => {
		repItem.value = item;
		upLoads.value.upLoadVisible = true;
	};
	const userinfo = async () => {
		let n = null;
		if (ind == 2) {
			// 表示卖家
			n = await SellerUserDetails();
		} else {
			// 表示买家
			n = await BuyerUserDetils();
		}
		obj.value = n.data;
	};
	// 举报请求
	const reportObj = async obj => {
		console.log(obj, "778787878787887");
		let n = await CreateUser({
			reportUserIdentity: 2,
			reportContent: obj.content,
			reportImages: obj.imgList,
			foreignId: repItem.value.userId
		});
		if (n.code == 200) {
			ElMessage.success(n.msg);
		}
		upLoads.value.upLoadVisible = false;
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
